<template>
  <view class="student-list">
    <view class="student-item" v-for="studentInfo in studentList" :key="studentInfo.id">
      <view class="student-item-school-grade-classes-student" @click="handleSelectClick(studentInfo)">
        <view class="student-item-school" style="margin-top: 0rpx">学校：{{ studentInfo.schoolName }}</view>
        <view class="student-item-school">年级：{{ studentInfo.gradeName }}</view>
        <view class="student-item-school">班级：{{ studentInfo.className }}</view>
        <view class="student-item-school">学生：{{ studentInfo.studentName }}</view>
      </view>
      <view class="student-item-bottom" v-if="source === 'user'">
        <view class="student-item-bottom-btn-cancel" @tap.stop="handleDelete(studentInfo)">删除</view>
        <view class="student-item-bottom-btn-pay" @tap.stop="handleEdit(studentInfo)">编辑</view>
      </view>
    </view>

    <view class="student-list-bottom">
      <view class="student-list-bottom-btn" @click="handleAdd"> 添加学生信息 </view>
    </view>
  </view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app';

import { listStudentInfo, delStudentInfo } from '@/api/org.js';

import { goBack, showToast, toPage } from '@/utils/app';

import { useUserInfoStore } from '@/stores/user';
const userInfoStore = useUserInfoStore();

// 来源 order  user
const source = ref('user');
onLoad((option) => {
  source.value = option.source;
});

const bindListener = () => {
  uni.$on('__studentRefresh__', function (data) {
    listStudentInfoReq();
  });
};

onMounted(() => {
  bindListener();
  listStudentInfoReq();
});

onUnmounted(() => {
  uni.$off('__studentRefresh__');
});

const studentList = ref([]);
const listStudentInfoReq = async () => {
  const res = await listStudentInfo(userInfoStore.userId);
  const data = res.data || [];
  studentList.value = data;
};

// 选择学生
const handleSelectClick = (item) => {
  if (source.value === 'order') {
    uni.$emit('__selectStudent__', item);
    goBack();
  }
};

const handleAdd = () => {
  toPage('/pages/user/SaveStudent');
};

// 删除学生信息
const handleDelete = (item) => {
  uni.showModal({
    title: '',
    content: '您确定要删除吗？',
    success: function (res) {
      if (res.confirm) {
        delStudentInfoReq(item.id);
      } else if (res.cancel) {
      }
    },
  });
};

const delStudentInfoReq = (id) => {
  delStudentInfo(id).then((res) => {
    showToast('删除成功');
    listStudentInfoReq();
  });
};

// 编辑学生信息
const handleEdit = (item) => {
  toPage('/pages/user/SaveStudent?id=' + item.id);
};
</script>

<style scoped lang="scss">
.student-list {
  display: flex;
  flex-direction: column;
  padding-bottom: 140rpx;

  .student-item {
    display: flex;
    flex-direction: column;
    margin: 24rpx 24rpx 0rpx 24rpx;
    padding: 24rpx;
    border-radius: 16rpx;
    background: #ffffff;

    .student-item-school-grade-classes-student {
      display: flex;
      flex-direction: column;

      .student-item-school {
        color: #202020;
        font-family: PingFang SC;
        font-size: 28rpx;
        margin-top: 16rpx;
      }
    }

    .student-item-bottom {
      border-top: 1rpx solid #efeff4;
      padding-top: 24rpx;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      margin-top: 24rpx;

      .student-item-bottom-btn-cancel {
        width: 120rpx;
        height: 58rpx;
        border-radius: 16rpx;
        border: 1rpx solid #afb6bd;
        background: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #4e5969;
        font-family: PingFang SC;
        font-weight: 500;
        font-size: 24rpx;
        margin-right: 24rpx;
      }

      .student-item-bottom-btn-pay {
        width: 120rpx;
        height: 58rpx;
        border-radius: 16rpx;
        background: linear-gradient(138.98deg, #cb3d3d 0.5%, #a11012 100.24%);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #ffffff;
        font-family: PingFang SC;
        font-weight: 500;
        font-size: 24rpx;
      }
    }
  }
}

.student-list-bottom {
  position: fixed;
  bottom: 0px;
  left: 0px;
  right: 0px;
  padding: 16rpx 32rpx;
  background: #ffffff;
  box-shadow: 0rpx -8rpx 20rpx #949fb340;
  display: flex;
  align-items: center;

  .student-list-bottom-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    height: 88rpx;
    border-radius: 24rpx;
    background: linear-gradient(138.98deg, #cb3d3d 0.5%, #a11012 100.24%);
    color: #ffffff;
    font-family: PingFang SC;
    font-weight: 600;
    font-size: 28rpx;
  }
}
</style>
